<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org "
      xmlns:layout="http://www.thymeleaf.org" layout:decorator="layouts/simpleLayout">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div layout:fragment="bodyContent">
        <div class="row" th:if="${#lists.isEmpty(cateList)}">
            <div class="col-md-12 col-xs-18 text-center">
                No item
            </div>
        </div>
        <div class="row" th:each="cate : ${cateList}" th:attr="id=${'row_' + cate.id}">
            <div class="col-md-2 col-xs-3">
                <img class="row-col-icon" th:src="'/images/upload/'+${cate.iconPath}"/>
            </div>
            <div class="col-md-4 col-xs-6" th:text="${cate.name}">

            </div>
            <div class="col-md-4 col-xs-6" th:text="${cate.price + '(vip:'+cate.vipPrice+')'}">

            </div>
            <div class="col-md-2 col-xs-3">
                <a th:href="${'/cate/detail/'+cate.id}">detail</a>
                <a href="#" th:attr="data-id=${cate.id},data-name=${cate.name}" onclick="onDeleteCate(this)">delete</a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-xs-18">
                <a href="/cate/new" class="btn btn-block btn-success">Add new</a>
            </div>
        </div>
        <script>
            function onDeleteCate(e){
                if(confirm('Do you sure delete '+name)){
                    var id = $(e).attr("data-id");
                    //do delete
                    $.ajax({
                        url:'/cate/delete',
                        type:'post',
                        dataType:'json',
                        data:{'id':id},
                        success:function(data){
                            if(data.success){
                                $("#row_"+id).remove();
                                alert("Delete success");
                            }else{
                            alert("delete cate failed");
                            }
                        },
                        error:function(er){
                            alert("delete cate error");
                            console.log(JSON.stringify(er));
                        }
                    });
                }
            }
    </script>

    </div>
</body>
</html>